<template>
  <div class="detail-container prize-detail-container">
    <div class="detail-header" v-if="activity_type=='luckdraw'">
      <div class="detail-header-con detail-header-con-more" :class="'order-status'+detail.status">
        <div class="status" style="margin-top:6%;">
          <span class="j-status">待买家填写收货地址</span>
        </div>
      </div>
    </div>
    <div class="detail-header" v-else>
      <div class="detail-header-con detail-header-con-more" :class="'order-status'+detail.status">
      <!-- status:0待填写地址，1待发货，2待收货，3已收货 -->
        <div class="status">
          <span class="j-status">{{detail.status_name}}</span>
        </div>
        <div class="order-no">
          <span>订单编号：</span>
          <span class="j-order_no">{{detail.order_prize_no}}</span>
        </div>
        <div class="order-no create-time">
          <span>时间：</span>
          <span class="j-create_time">{{detail.create_time}}</span>
        </div>
      </div>
    </div>
    <div class="detail-con prize-detail-con">
      <div class="item-block goods-container">
        <ul class="order-goods">
          <li class="goods-li"
              @click="linkTo(detail.link)">
            <section class="order-goods-img">
              <a href="javascript:;">
                <img :src="detail.img_path+'160x160'" width="80" height="80" v-if="detail.is_compress==1"/>
                <img :src="detail.img_path" width="80" height="80" v-else/>
              </a>
            </section>
            <section class="order-goods-infor g-flex">
              <div class="left">
                <a href="javascript:;" class="goods-title">{{detail.item_title}}</a>
                <div class="goods-props" v-if="detail.level">{{detail.level}}</div>
                <div class="price" v-if="detail.pay_type && detail.pay_type==5">&dollar; <em>{{detail.current_pric}}</em>}</div>
                <div class="price" v-else v-html="scaleGoodsPriceFn(detail.current_price)"></div>
              </div>
              <div class="right">
                <span class="num fr"><i>x</i>1</span>
              </div>
            </section>
          </li>
        </ul>
      </div>
      <!-- 定制 赠品 待发货显示 start -->
      <div class="item-block" v-if="item_specifications_name || specifications_name">
        <template v-if="item_specifications_name">
          <div class="title">商品规格</div>
          <div class="content-list">{{item_specifications_name}}</div>
        </template>
        <template v-if="specifications_name">
          <div class="title">赠品规格</div>
          <div class="content-list">{{specifications_name}}</div>
        </template>
      </div>
      <!-- 定制 赠品 待发货显示 end -->
      <!-- 定制 赠品规格选择 start -->
      <template v-if="detail.status == 0">
        <section class="item-block item-block2" v-if="item_specifications.length>0">
          <div class="gift-list">
            <div class="title">商品规格</div>
            <div class="gift-sku" v-for="(item,index) in item_specifications" :key="index">
              <div class="small-title">{{ item.property_name }}</div>
              <div class="gift-dz">
                <div
                  v-if="child.sku_name"
                  v-for="(child, num) in item.child_names"
                  :key="num"
                  @click="handleClickSku(child, num, index)"
                  round hairline class="btn"
                  :class="[child.active ? 'click-gift-sku': '', child.isShow ? '':'noneActive']">{{ child.sku_name }}</div>
              </div>
            </div>
          </div>
        </section>

        <section class="item-block item-block2" v-if="specifications.length>0">
          <div class="gift-list">
            <div class="title">赠品选择规格</div>
            <div class="gift-sku">
              <div class="small-title">品类：</div>
              <div class="gift-dz">
                <!-- <div class="click-gift-sku">{{list.name}}</div> -->
                <div :class="showCategory == list.id ?'click-gift-sku':''" v-for="(list,index) in specifications" :key="index" @click="onShowItem(list)">{{list.name}}</div>
              </div>
            </div>
            <div class="gift-sku" v-if="firstDetails.length>0">
              <div class="small-title">规格 1：</div>
              <div class="gift-dz">
                <div :class="showFirst == list.id ?'click-gift-sku':''" v-for="(list,index) in firstDetails" :key="index" @click="onShowSkuFirst(list)">{{list.name}}</div>
              </div>
            </div>
            <div class="gift-sku" v-if="secondDetails.length>0">
              <div class="small-title">规格 2：</div>
              <div class="gift-dz">
                <div :class="showSecond == list.id ?'click-gift-sku':''" v-for="(list,index) in secondDetails" :key="index" @click="onShowSkuSecond(list.id)">{{list.name}}</div>
              </div>
            </div>
          </div>
        </section>
      </template>
      <!-- 定制 赠品规格选择 end -->
      <!-- 运费 -->
      <div class="item-block" v-if="post_fee>0">
        <div class="price-con">
          <div class="label">运费</div>
          <div class="line-detail" v-if="freight_payer==4">到付</div>
          <div class="line-detail" v-else>
            <span v-if="detail.pay_type==5">&dollar;</span>
            <span v-else>&yen;</span>
            <span>{{post_fee}}</span>
          </div>
        </div>
      </div>
      <!-- 快递信息 -->
      <div class="item-block wuliu-wrap" v-if="detail.status==2 || detail.status == 3">
        <div v-if="detail.is_self_take==1">
          <div>自提地址：{{detail.self_take_address}}</div>
        </div>
        <div v-else>
          <div>物流信息：{{detail.express_name}}</div>
          <div>{{detail.express_no}}</div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="prize-address-wrap">
        <div class="item-block address address-box1" v-if="detail.status != 0 && detail.is_self_take!=1 && detail.receiver_address">
          <div class="left"></div>
          <div class="right">
            <div class="name">{{detail.receiver_name}} {{detail.receiver_mobile}}</div>
            <div class="addr">{{detail.receiver_address}}</div>
          </div>
        </div>
        <!-- 地址管理 -->
        <div class="item-block address address-box2" v-if="detail.status == 0 " @click="handleClickOpenAddress">
          <div class="left"></div>
          <div class="right" v-if="curAddress">
            <div class="name">{{curAddress.name}} {{curAddress.mobile}}</div>
            <div class="addr">{{curAddress.province}}{{curAddress.city}}{{curAddress.area}}{{curAddress.address}}</div>
            <div class="addr" v-if="curAddress.id_card">(身份证号：{{curAddress.id_card}})</div>
            <div class="addr" v-if="curAddress.email">(邮箱地址：{{curAddress.email}})</div>
          </div>
          <div class="right" v-else>请填写收货地址</div>
          <svg-icon icon-class="icon_right" class="all-class-icon"></svg-icon>
        </div>
      </div>

      <!-- 按钮 -->
      <div class="orderDetail">
        <!--判断是否需要支付-->
        <section class="prize-detail-actions" v-if="!post_fee || post_fee==0">
          <van-button round
            class="btn red-gra-btn btn-add-address"
            v-if="detail.status==0"
            @click="clickPay()"
          >提交地址</van-button>
          <van-button round
            class="btn red-gra-btn j-confirmOrder"
            v-if="detail.status==2"
            @click="confirmOrder()"
          >确认收货</van-button>
        </section>
        <section v-else-if="!detail.pay_time && detail.status==0">
          <!--余额支付-->
          <div class="item-block user-balance" v-if="isShow && user_balance > 0">
            <div class="item-box">
              <!-- <van-checkbox class="item-title" v-model="money_type" shape="square" icon-size="14px">
                使用余额
                  <i>(余额：<span class="smallsize">&yen;{{user_balance}}</span>)</i>
                <template #icon="money_type">
                  <img class="img-icon" :src="money_type ? activeIcon : inactiveIcon" />
                </template>
              </van-checkbox> -->

              <van-checkbox class="item-title" v-model="money_type" shape="square" icon-size="14px" checked-color="#F20B22">
               使用余额
                  <i>(余额：<span class="smallsize">&yen;{{user_balance}}</span>)</i>
              </van-checkbox>
            </div>
          </div>
          <!-- 其他支付方式 -->
          <div class="item-block" v-show="isShowOtherPayment">
            <payment ref="payments"
              :isHdfkPay='false'
              :isXxPay='false'
              :isPM="false"
              :isYuePay="true"
              :isTlfzPay="true"
              :isHffzPay="true"
              @globalAlipay="globalAlipay"
              v-model="paymentWay"></payment>
          </div>

          <section class="prize-detail-actions">
            <van-button round class="btn red-gra-btn" @click="clickPay()">支付运费</van-button>
          </section>
        </section>
      </div>
    </div>

    <address-dialog :visible.sync="addressVisible" @selectAddress="selectAddress"></address-dialog>
  </div>
</template>

<script>
import { isWeixinCient } from '@/utils/validate'
import addressDialog from '@/components/addressDialog'
import Vue from 'vue'
import { Checkbox, RadioGroup, Radio, Popup, Dialog } from 'vant'
Vue.use(Checkbox)
  .use(RadioGroup)
  .use(Radio)
  .use(Popup)
import { getPrizeDetail, userConfirm, prizeAddress } from '@/api/order/prizeOrder.js'
import { scaleGoodsPrice } from '@/utils/index.js'
import Payment from '@/components/Payment'
import { openPage } from '@/utils/utils.js'
import smallpay from '@/smallapp/smallpay'
import small from '@/smallapp/small'
import { getPostFee } from '@/api/order/order.js'

export default Vue.extend({
  name: 'index',
  components: {
    Payment,
    addressDialog
  },
  data() {
    return {
      currentAddress: {},
      detail: {},
      post_fee: 0,
      freight_payer: '',
      address: {},
      curAddress: null, // 选中的地址id
      addressVisible: false,
      paymentWay: '',
      money_type: true, //  选用余额
      isShow: true,
      isShowOtherPayment: false,
      activeIcon: 'https://img.wifenxiao.com/h5-wfx/images/check_icon.png',
      inactiveIcon: 'https://img.wifenxiao.com/h5-wfx/images/uncheck__icon.png',
      code: '',
      user_balance: '',
      payType: '',
      formData: {
        'global_alipay_currency': '',
        'hantepay': '',
        'allinpay': '',
        'newyeepay': ''
      },
      // shop_info: {
      //   qipay_open: 0
      // }
      activity_type: '',
      // 定制 赠品 start
      specifications: [],
      firstDetails: [],
      secondDetails: [],
      showCategory: '',
      showFirst: '',
      showSecond: '',
      item_specifications: [],
      // skuInfo: '',
      skuNameStr: '请选择商品规格',
      skuNameShow: '',
      noChooseProp: [],
      item_specifications_name: '',
      specifications_name: '',
      remark: false,
      // 定制 赠品 end
      freight_tpl_id: ''
    }
  },
  mounted() {
    if (small.wxCache('adapayPlugVersion') == 'jump_adapay_mini') {
      window.addEventListener('wxshow', () => {
        let options = wx.getEnterOptionsSync();
        // wx1e18d140f890f2c5，wx308088053f4ecc3a
        if (options.scene == '1038' && options.referrerInfo.appId == this.hfAppId && this.remark == 2) {
          // 代表从收银台小程序返回
          this.Jump('prize-list')
        }
      }),
      window.addEventListener('wxHide', () => {
        this.remark = 2
      })
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    globalAlipay(val) {
      this.global_alipay_currency = val
    },
    // 选择地址
    selectAddress(data) {
      this.curAddress = data
      this.getPost()
    },
    // 打开地址弹窗
    handleClickOpenAddress() {
      this.addressVisible = true
    },
    // 获取运费
    getPost() {
      const data = {
        province_id: this.curAddress.province_id,
        area_id: this.curAddress.area_id,
        city_id: this.curAddress.city_id,
        item_ids: [this.detail.item_id],
        freight_tpl_id: this.freight_tpl_id,
        nums: [1]
      }
      getPostFee(data).then(res => {
        if (res.status == 1) {
          this.post_fee = res.data.post_fee
        }
      })
    },
    // 根据余额是否够支付运费,判断其他支付方式的显示
    recount() {
      if (this.post_fee > this.user_balance) {
        this.isShowOtherPayment = true
      } else {
        this.isShowOtherPayment = false
      }
    },
    init() {
      const query = this.$route.query
      const params = {
        id: query.id
      }
      if(this.activity_type){
        params.activity_type = this.activity_type
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getPrizeDetail(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.detail = resData.detail
          this.post_fee = resData.post_fee
          this.freight_payer = resData.freight_payer
          // this.address = resData.address
          this.address = resData.address[0]
          this.curAddress = this.address.address_id ? this.address : null
          this.freight_tpl_id = resData.freight_tpl_id
          this.code = resData.code
          // this.is_freight = resData.is_freight
          this.user_balance = resData.user_balance
          this.is_alipay = resData.is_alipay
          this.is_wx_pay = resData.is_wx_pay
          this.default_pay_type = resData.default_pay_type
          this.item_specifications_name = resData.item_specifications_name ? resData.item_specifications_name : ''
          this.specifications_name = resData.specifications_name ? resData.specifications_name : ''
          // 定制 赠品备注 start
          this.item_specifications = resData.item_specifications ? resData.item_specifications : []
          this.specifications = resData.specifications ? resData.specifications : []
          if (this.specifications.length > 0) {
            this.firstDetails = this.specifications[0].data ? this.specifications[0].data : []
            this.secondDetails = this.firstDetails.length > 0 && this.firstDetails[0].data && this.firstDetails[0].data.length > 0 ? this.firstDetails[0].data : []
            this.showCategory = this.specifications[0].id
            this.showFirst = this.firstDetails.length > 0 ? this.firstDetails[0].id : ''
            this.showSecond = this.secondDetails.length > 0 ? this.secondDetails[0].id : ''
          }
          // 定制 赠品备注 end
          if (resData.is_tlfz) {
            this.isShow = false
            this.money_type = false
          }
          if (this.user_balance == 0) {
            this.money_type = false
          }
          this.recount()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 确认收货
    confirmOrder() {
      Dialog.confirm({
        message: '确认收货？',
        className: 'common-confirm',
        closeOnClickOverlay: true
      })
        .then(() => {
          this.$loadingWrap.show()
          setTimeout(() => {
            this.$loadingWrap.close()
          }, 10000)
          userConfirm({ id: this.detail.order_prize_id }).then(res => {
            this.$loadingWrap.close()
            if (res.status == 1) {
              this.$Error('操作成功')
              const that = this
              setTimeout(function() {
                that.init()
              }, 1000)
            } else {
              this.$Error(res.msg)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    clickPay() {
      if (!this.curAddress.address_id) {
        this.$Error('请选择收货地址')
        return false
      }
      // 定制 赠品 start
      if (this.item_specifications.length > 0 && this.skuNameStr) {
        this.$Error(this.skuNameStr)
        return false
      }
      // 定制 赠品 end
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      if (this.paymentWay == 'wxpay') {
        if (isWeixinCient()) { // 微信环境
          this.payType = 2
        } else { // 非微信环境
          // 开启了微信h5支付
          // 游戏订单付款暂不支持h5支付
          this.$Error('请在微信客户端打开链接')
          this.$loadingWrap.close()
          return false
          // this.payType = 12
        }
      } else if (this.paymentWay == 'alipay') {
        this.payType = 1
      } else if (this.paymentWay == 'Hdfkpay') {
        this.payType = 3
      } else if (this.paymentWay == 'jdpay') {
        this.payType = 4
      } else if (this.paymentWay == 'PayPalpay') {
        this.payType = 5
      } else if (this.paymentWay == 'BeiBaopay') {
        this.payType = 6
      } else if (this.paymentWay == 'peerpay') {
        this.payType = 7
      } else if (this.paymentWay == 'ylpay') {
        this.payType = 8
      } else if (this.paymentWay == 'kqpay') {
        this.payType = 9
      } else if (this.paymentWay == 'xxpay') {
        this.payType = 10
      } else if (this.paymentWay == 'yeepay') {
        this.payType = 11
      } else if (this.paymentWay == 'newyeepay') {
        this.formData.newyeepay = 1
        this.payType = 14
      } else if (this.paymentWay == 'cloudPay') { // 定制云闪付
        this.payType = 17
      } else if (this.paymentWay == 'globalAlipay') { // 国际支付宝
        this.payType = 15
        this.formData.global_alipay_currency = this.global_alipay_currency
      } else if (this.paymentWay == 'htwxpay') { // 定制 hante
        this.payType = 16
        this.formData.hantepay = 1
      } else if (this.paymentWay == 'htAlipay') { // 定制 hante
        this.payType = 16
        this.formData.hantepay = 2
      } else if (this.paymentWay == 'tlwxpay') { // 通联支付
        this.payType = 19
        this.formData.allinpay = 1
      } else if (this.paymentWay == 'tlAlipay') { // 通联支付
        this.payType = 19
        this.formData.allinpay = 2
      } else if (this.paymentWay == 'goallpay') { // GoAllPay
        this.payType = 20
      } else if (this.paymentWay == 'Alipay') {
        this.payType = 21
      } else if (this.paymentWay == 'UnionPay') {
        this.payType = 22
      } else if (this.paymentWay == 'WeChatPay') {
        this.payType = 23
      } else if (this.paymentWay == 'ytDzWxPay') {
        this.payType = 24
      } else if (this.paymentWay == 'ytDzZfbPay') {
        this.payType = 25
      } else if (this.paymentWay == 'tlfzWxpay') {
        this.payType = 26
        this.formData.tlfz_pay_type = 1
      } else if (this.paymentWay == 'hffzWxpay') { // 汇付分账 微信
        this.payType = 34
        this.formData.adapay_pay_type = 2
      }
      const data = {
        order_prize_id: this.detail.order_prize_id,
        address_id: this.curAddress.address_id,
        money_type: this.money_type && this.user_balance > 0 ? 2 : '',
        type: this.payType,
        code: this.code,
        tlfz_pay_type: this.formData.tlfz_pay_type,
        adapay_pay_type: this.formData.adapay_pay_type
      }
      if(this.activity_type){
        data.activity_type=this.activity_type
      }
      // 定制 赠品 start
      if (this.specifications.length > 0) {
        data.specifications = {
          category_id: this.showCategory ? this.showCategory : '',
          specifications_first_id: this.showFirst ? this.showFirst : '',
          specifications_second_id: this.showSecond ? this.showSecond : ''
        }
      }
      if (this.item_specifications.length > 0) {
        data.item_specifications = this.skuNameShow
      }
      // 定制 赠品 end
      prizeAddress(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // TODO 小程序
            // 微信支付
            if (this.payType == 2 && res.data.jsApiParameters) {
              smallpay.wxOrderPay(res.data.jsApiParameters,'',res.data.prizeListUrl)
            } else if (this.payType == 26 && res.data.is_mini_vsp) {
              this.Jump('/buyTonglianWait',{ order_id: this.detail.order_prize_id, pay_type: 11 })
            } else if (this.payType == 34) {
              if (small.wxCache('adapayPlugVersion') == 'jump_adapay_mini') {
                const jsApiParameters = typeof res.data.jsApiParameters === 'object' ? res.data.jsApiParameters : JSON.parse(res.data.jsApiParameters)
                this.hfAppId = jsApiParameters.wx_app_id
                const that = this
                wx.navigateToMiniProgram({
                  appId: jsApiParameters.wx_app_id,
                  path: jsApiParameters.miniapp_path,
                  success(res) {
                    // 打开成功
                    console.log(res)
                  },
                  fail(error) {
                    // that.$Error('跳转失败')
                    // that.Jump('buySuccess', {id: res.data.order_id})
                  }
                })
              } else if (small.wxCache('adapayPlugVersion') == 'self') {
                smallpay.wxOrderPay(res.data.jsApiParameters,'',res.data.prizeListUrl)
              } else {
                const adapayPlugin = small.wxCache('adapayPlugVersion') == 'new' ? requirePlugin("Adapay") : requirePlugin("adapay-plugin")
                // 汇付分账
                this.isSubmit = false
                console.log('typeof obj',  typeof res.data.jsApiParameters === 'object')
                const hfPay= res.data.jsApiParameters
                if (hfPay) {
                  adapayPlugin.requestPay(hfPay, this.paySuccess, this.payError);
                }
              }
            } else if (res.data.redirect_url) {
              setTimeout(() => {
                openPage(res.data.redirect_url)
              }, 1000)
            }
        } else {
          this.$Error(res.msg)
          if (res.has_delete_specifications) {
            setTimeout(() => {
              this.$router.go(0)
            }, 1000)
          }
        }
      })
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 定制 赠品 start
    // 定制 赠品 更改品类
    onShowItem(data) {
      this.firstDetails = data.data ? data.data : []
      this.secondDetails = this.firstDetails.length > 0 && this.firstDetails[0].data ? this.firstDetails[0].data : []
      this.showCategory = data.id
      this.showFirst = this.firstDetails.length > 0 ? this.firstDetails[0].id : ''
      this.showSecond = this.secondDetails.length > 0 ? this.secondDetails[0].id : ''
    },
    // 定制 赠品 更改规格 1
    onShowSkuFirst(data) {
      this.secondDetails = data.data ? data.data : []
      this.showFirst = data.id
      this.showSecond = this.secondDetails ? this.secondDetails[0].id : ''
    },
    // 定制 赠品 更改规格 2
    onShowSkuSecond(data) {
      this.showSecond = data
    },
    // 定制 赠品 选择商品的 sku
    handleClickSku(item, num, index) {
      const skuList = this.item_specifications
      const child_names = skuList[index].child_names
      child_names.forEach((sku, number) => {
        if (num == number) {
          if (!sku.active) {
            this.$set(this.item_specifications[index].child_names[num], 'active', true)
          } else {
            this.$set(this.item_specifications[index].child_names[num], 'active', false)
          }
        } else {
          this.$set(this.item_specifications[index].child_names[number], 'active', false)
        }
      })
      this.dealFindSkuInfo()
      // // console.log(num, index, item, '点击SKU')
      // this.specificationBtn(item.sku_name, index, num)
    },
    /**
     * 找出SKU信息
     */
    dealFindSkuInfo() {
      const skuList = this.item_specifications
      if (this.item_specifications.length > 0) {
        const arrSku = [] // 存储sku的key
        const arrSkuName = [] // 存储sku的文字信息
        skuList.forEach(item => {
          if (Array.isArray(item.child_names)) {
            item.child_names.forEach(sku => {
              if (sku.active) {
                arrSku.push(sku.prop_id)
                arrSkuName.push(sku.sku_name)
              }
            })
          }
        })
      }
      // 检索选择的规格
      this.validateSpecAll()
    },
    /**
     * 验证是否选中
     */
    validateSpecAll() {
      const skuList = this.item_specifications
      const arrSku = [] // 存储sku的key
      const arrSkuName = [] // 存储sku的文字信息
      const propName = []
      const noChooseProp = []
      skuList.forEach(item => {
        noChooseProp.push(item.property_name)
        if (Array.isArray(item.child_names)) {
          item.child_names.forEach(sku => {
            if (sku.active) {
              arrSku.push(sku.prop_id)
              arrSkuName.push(sku.sku_name)
              propName.push(item.property_name)
            }
          })
        }
      })
      /*eslint no-extend-native: ["error", { "exceptions": ["Array"] }]*/
      Array.prototype.remove = function(val) {
        var index = this.indexOf(val)
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      propName.forEach(item => {
        noChooseProp.remove(item)
      })
      // 赋值筛选未选择的部分
      this.noChooseProp = noChooseProp
      if (noChooseProp.length > 0) {
        const skuNameTemp = noChooseProp.join(' ') || '商品规格'
        this.skuNameStr = `请选择商品规格中：${skuNameTemp} `
      } else {
        this.skuNameShow = `${arrSku.join(':')}`
        this.skuNameStr = ''
      }
    }
    // 定制 赠品 end
  },
  watch: {
    'money_type'(val) {
      if (!val) {
        this.isShowOtherPayment = true
      } else {
        // 勾选了余额时，如果余额不足运费，显示其他支付方式
        this.recount()
      }
    }
  },
  created() {
    if (small.wxCache('adapayPlugVersion') == 'jump_adapay_mini') {
      this.remark = 1
    }
    const query = this.$route.query
    if (query.activity_type) {
      this.activity_type = query.activity_type
    }
    this.init()
  }
})
</script>

<style lang="scss">
// @import 'src/styles/variables.scss';
// @import 'src/styles/mixin';
@import "src/styles/order/detail";
.prize-detail-container{
  &.detail-container{
    .detail-header{
      .detail-header-con{
        background-image: none;
        &.order-status0{
          background-image:url("https://img.wifenxiao.com/h5-wfx/images/order/order_address.png");
        }
        &.order-status1,&.order-status2,&.order-status3{
          background-image:url("https://img.wifenxiao.com/h5-wfx/images/order/order_send.png");
        }
      }
    }
  }
  // .van-checkbox__icon--checked .van-icon{
  //   background: url(https://img.wifenxiao.com/h5-wfx/images/check_icon.png) center/cover no-repeat;
  // }
  .van-checkbox__icon{
    width:28px;
    height:28px;
  }
  .van-checkbox__icon .van-icon{
    position:relative;
    width: 28px;
    height: 28px;
    // visibility: hidden;
  }
  .van-checkbox__icon .van-icon::before{
    position: absolute;
    top:0;
    left:0;
    font-size:28px;
    line-height:1;
  }
  .van-checkbox{
    position: relative;
    .img-icon{
      width: 28px;
      height: 28px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .user-balance{
    font-weight:bold;
    i{
      font-weight:bold;
    }
  }
  .prize-detail-actions{
    padding:0 26px;
    .btn{
      width:100%;
      height:80px;
      font-size:32px;
      color:#fff;
    }
  }
}
// 定制 赠品
.content-list {
  margin: 10px 0 20px 20px;
}
.gift-list {
  padding: 20px;
  .title {
    font-size: 28px;
    font-weight: 500
  }
  .gift-sku {
    .small-title {
      margin: 20px 0 10px 0;
    }
    .gift-dz {
      display:flex;
      flex-wrap: wrap;
      div{
        background: #F2F2F2;
        border: 1px solid #F2F2F2;
        margin-bottom: 20px;
        color: #333;
        font-size:24px;
        padding: 2px 30px;
        border-radius: 50px;
        margin-right: 24px;
        &.click-gift-sku {
          background: #F21228;
          border:1p solid #F21228;
          color:#fff
        }
        
      }
    }
  }
}
</style>
